<div class="apostilleMessage">
  <div class="container-fluid main">

    <div class="row">
      <div class="col-sm-8">
        <h2>{{ 'APOSTILLE_MESSAGE_TITLE' | translate }}</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6 col-md-12">
        <div class="panel-heading">
          <div class="tabDescription">
            <!-- Title of panel -->
            <span ng-show="!$ctrl.formData.isMultisig && !$ctrl.invoice">{{ 'TRANSFER_TRANSACTION_NAME' | translate }}</span>
            <span ng-show="$ctrl.formData.isMultisig">{{ 'TRANSFER_TRANSACTION_MULTISIG_NAME' | translate }}</span>
            <span ng-show="$ctrl.invoice">{{ 'APOSTILLE_CREATE_MESSAGE_REQUEST' | translate }}</span>
          </div>
          <!-- Tabbed modes -->
          <ul class="nav nav-tabs">
            <!-- Normal mode -->
            <!-- On click it set multisig to false, invoice to false and update mosaics of account -->
            <li ng-class="$ctrl.formData.isMultisig || $ctrl.invoice ? '' : 'active'"><a ng-click="$ctrl.formData.isMultisig = false;$ctrl.invoice = false;$ctrl.updateCurrentAccountMosaics();$ctrl.updateCurrentAccountNS();$ctrl.setMessage();$ctrl.setMosaicTransfer();">{{ 'GENERAL_TAB_NORMAL' | translate }}</a></li>
            <!-- Multisig mode -->
            <!-- On click it set multisig to true, invoice to false update mosaics of account -->
            <li ng-show="$ctrl._DataBridge.accountData.meta.cosignatoryOf.length" ng-class="$ctrl.formData.isMultisig ? 'active' : ''"><a ng-click="$ctrl.formData.isMultisig = true;$ctrl.invoice = false;$ctrl.formData.encryptMessage = false;$ctrl.updateCurrentAccountMosaics();$ctrl.updateCurrentAccountNS();$ctrl.setMessage();$ctrl.setMosaicTransfer();">{{ 'GENERAL_TAB_MULTISIG' | translate }}</a></li>
            <!-- Invoice mode -->
            <!-- On click it set multisig to false, set invoice to true, isMosaicTransfer to false and reset form data -->
            <li ng-class="$ctrl.invoice ? 'active' : ''"><a ng-click="$ctrl.formData.isMultisig = false;$ctrl.invoice = true;$ctrl.formData.isMosaicTransfer = false;">{{ 'APOSTILLE_REQUEST_MESSAGE' | translate }}</a></li>
          </ul>
        </div>

        <!-- Transaction form -->
        <div class="panel-body" ng-show="!$ctrl.invoice">
          <!-- SELECT MULTISIG ACCOUNT -->
          <fieldset class="form-group" ng-show="$ctrl.formData.isMultisig">
            <div class="input-group">
              <span class="input-group-btn">
                <label for="namespaceParent" class="control-label">{{ 'GENERAL_ACCOUNT' | translate }}:</label>
              </span>
              <!-- Update account mosaics on change -->
              <select class="form-control" ng-options="(acc.address | fmtContact:$ctrl.contacts) for acc in $ctrl._DataBridge.accountData.meta.cosignatoryOf track by acc.address" ng-model="$ctrl.formData.multisigAccount" ng-change="$ctrl.updateCurrentAccountMosaics();$ctrl.updateCurrentAccountNS();$ctrl.setMessage();$ctrl.setMosaicTransfer();"></select>
            </div>
          </fieldset>
          <!-- MULTISIG ACCOUNT BALANCE -->
          <fieldset class="form-group" ng-show="$ctrl.formData.isMultisig && $ctrl.formData.multisigAccount">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{'FORM_SIDE_BTN_BALANCE' | translate}}</label>
              </span>
              <div class="form-control formFloat" readOnly>
                <input type="text" value="{{ ($ctrl.formData.multisigAccount.balance | fmtNemValue)[0] }}.{{ ($ctrl.formData.multisigAccount.balance | fmtNemValue)[1] }}" readOnly disabled/>
                <label class="floatRight"><small>XEM</small></label>
              </div>
            </div>
          </fieldset>
          <!-- NOTARIZATION ACCOUNT -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{'APOSTILLE_NTY_ACCOUNT' | translate}}</label>
              </span>
              <input class="form-control" type="text" ng-model="$ctrl.formData.recipient" readOnly/>
            </div>
          </fieldset>
          <!-- CHECKBOX FIELDS -->
          <div class="row checkboxes">
            <div class="col-sm-3">
              <fieldset class="form-group">
                <input id="box10" type="checkbox" ng-model="$ctrl.formData.isMosaicTransfer" ng-change="$ctrl.setMosaicTransfer();">
                <label for="box10">{{'APOSTILLE_MESSAGE_ADD_MOSAIC' | translate}}</label>
              </fieldset>
            </div>
            <div class="col-sm-5">
              <fieldset class="form-group">
                <input id="box11" type="checkbox" ng-model="$ctrl.addNamespace" ng-change="$ctrl.setMessage();">
                <label for="box11">{{'APOSTILLE_MESSAGE_NS_BRAND' | translate}}</label>
              </fieldset>
            </div>
            <div class="col-sm-4">
              <fieldset class="form-group">
                <input id="box12" type="checkbox" ng-model="$ctrl.formData.encryptMessage" placeholder="" ng-disabled="$ctrl.formData.isMultisig || !$ctrl.formData.recipientPubKey.length" ng-change="$ctrl.updateFees();">
                <label for="box12">{{'TRANSFER_TRANSACTION_ENCRYPT_MESSAGE' | translate}}</label>
              </fieldset>
            </div>
          </div>
          <!-- NAMESPACE TO USE AS BRAND -->
          <fieldset class="form-group" ng-show="$ctrl.addNamespace">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{'GENERAL_NAMESPACE' | translate}}</label>
              </span>
              <select class="form-control" ng-options="namespace.fqn for namespace in $ctrl._DataBridge.namespaceOwned[$ctrl.currentAccount] | objValues" ng-model="$ctrl.namespaceParent" ng-change="$ctrl.setMessage();"></select>
            </div>
          </fieldset>
          <!-- MESSAGE FIELD -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn message">
                <label>{{'FORM_MESSAGE_PLACEHOLDER' | translate}}: </label>
              </span>
              <textarea class="form-control" ng-model="$ctrl.formData.message" placeholder="{{'FORM_MESSAGE_PLACEHOLDER' | translate}}" rows="4" ng-change="$ctrl.updateFees();"></textarea>
            </div>
          </fieldset>
          <!-- Transaction fee calculation section -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{'FORM_SIDE_BTN_TX_FEE' | translate}}: </label>
              </span>
              <div class="form-control formFloat" readOnly>
                <span class="feeAmount">
                  <!-- Multisig fee -->
                  <span ng-show="$ctrl.formData.isMultisig">{{($ctrl.formData.innerFee | fmtNemValue)[0]}}.{{($ctrl.formData.innerFee | fmtNemValue)[1]}} +</span>
                  <!-- Transaction fee -->
                  <span>{{($ctrl.formData.fee | fmtNemValue)[0]}}.{{($ctrl.formData.fee | fmtNemValue)[1]}} <span ng-show="$ctrl.formData.encryptMessage">(+ encryption fees)</span></span>
                </span>
                <label class="floatRight"><small>XEM</small></label>
              </div>
            </div>
          </fieldset>
          <!-- PASSWORD FIELD -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label ng-class="!$ctrl.common.password.length ? 'has-error' : ''">{{ 'FORM_PASSWORD' | translate }}: </label>
              </span>
              <input class="form-control" type="password" placeholder="{{ 'FORM_PASSWORD_FIELD_PLACEHOLDER' | translate }}" ng-model="$ctrl.common.password" ng-class="!$ctrl.common.password.length ? 'has-error' : ''"/>
            </div>
          </fieldset>
          <!-- Send button disabled if already pressed or no password or no clean recipient address or message is supposed to be encrypted but no recipient public key or is a mosaic transfer and no mosaics in array -->
          <button class="btn btn-success" type="submit" ng-show="!$ctrl.invoice" ng-disabled="$ctrl.okPressed || !$ctrl.common.password.length || $ctrl.formData.recipient.length !== 40 || $ctrl.formData.encryptMessage && $ctrl.formData.recipientPubKey.length !== 64 || $ctrl.formData.isMosaicTransfer && !$ctrl.formData.mosaics.length || $ctrl.addNamespace && !$ctrl.namespaceParent" ng-click="$ctrl.send()">
              <i class="fa fa-send"></i> {{ 'GENERAL_SEND' | translate }}
          </button>
        </div>
        <div class="panel-body" ng-show="$ctrl.invoice">
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{'APOSTILLE_NTY_ACCOUNT' | translate}}: </label>
              </span>
              <input class="form-control" type="text" ng-model="$ctrl.invoiceData.data.addr" disabled/>
            </div>
          </fieldset>
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{'FORM_MESSAGE_PLACEHOLDER' | translate}}: </label>
                </span>
                <textarea class="form-control" ng-model="$ctrl.invoiceData.data.msg" placeholder="{{'FORM_MESSAGE_PLACEHOLDER' | translate}}" rows="4" ng-change="$ctrl.updateInvoiceQR();"></textarea>
              </div>
            </fieldset>
        </div>
      </div>

      <!-- Mosaics part -->
      <div class="col-md-6" ng-show="$ctrl.formData.isMosaicTransfer">
        <div class="panel-heading">
          <h3>{{ 'TRANSFER_TRANSACTION_ATTACH_MOSAIC' | translate }} <i class="fa fa-paperclip"></i></h3>
        </div>
        <div class="panel-body">
          <!-- MOSAIC SELECTION -->
          <div class="form-group">
            <div class="input-group">
              <select class="col-sm-7 form-control" ng-options="mosaicName for mosaicName in $ctrl.currentAccountMosaicNames" ng-model="$ctrl.selectedMosaic" required="required" id="mosaic" ng-disabled="!$ctrl.formData.isMosaicTransfer"></select>
              <span class="input-group-btn">
                <button type="button" class="btn btn-success" ng-click="$ctrl.attachMosaic()" ng-disabled="!$ctrl.formData.isMosaicTransfer">{{ 'TRANSFER_TRANSACTION_ATTACH' | translate }}</button>
              </span>
            </div>
          </div>
          <!-- MOSAIC BALANCE -->
          <div class="form-group" ng-show="$ctrl.selectedMosaic !== 'nem:xem'">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{'FORM_SIDE_BTN_BALANCE' | translate}}</label>
              </span>
              <div class="form-control formFloat" disabled>
                <input class="readOnly mosaic" type="text" value="{{($ctrl.currentAccountMosaicData[$ctrl.selectedMosaic].quantity | fmtSupply:$ctrl.currentAccountMosaicData[$ctrl.selectedMosaic].mosaicId:$ctrl._DataBridge.mosaicDefinitionMetaDataPair)[0]}}.{{($ctrl.currentAccountMosaicData[$ctrl.selectedMosaic].quantity | fmtSupply:$ctrl.currentAccountMosaicData[$ctrl.selectedMosaic].mosaicId:$ctrl._DataBridge.mosaicDefinitionMetaDataPair)[1]}}" readOnly/>
                  <label class="floatRight"><small>{{$ctrl.currentAccountMosaicData[$ctrl.selectedMosaic].mosaicId.namespaceId}}:{{$ctrl.currentAccountMosaicData[$ctrl.selectedMosaic].mosaicId.name}}</small></label>
              </div>
            </div>
          </div>
        </div>
        <!-- Mosaics attached table -->
        <div class="panel-default mosaicsAttached">
          <div class="panel-heading">
            <h3> {{ 'TRANSFER_TRANSACTION_MOSAICS_ATTACHED' | translate }}</h3>
          </div>
          <table class="table table-condensed">
            <thead>
              <tr>
                <th>{{ 'GENERAL_MOSAIC' | translate }}</th>
                <th>{{ 'GENERAL_AMOUNT' | translate }}</th>
                <th>{{ 'GENERAL_TOTAL' | translate }}</th>
                <th>{{ 'GENERAL_LEVY' | translate }}</th>
                <th>{{ 'GENERAL_REMOVE' | translate }}</th>
              </tr>
            </thead>
          </table>
          <table class="table table-condensed">
            <tbody>
              <tr ng-repeat="mos in $ctrl.formData.mosaics">
                <td style="overflow:hidden;text-overflow: ellipsis;" title="{{mos.mosaicId.namespaceId}}:{{mos.mosaicId.name}}"><span class="text-muted">{{mos.mosaicId.namespaceId}}</span>:{{mos.mosaicId.name}}</span>
                </td>
                <td style="padding:0;"><input id="{{mos.gid}}" type="number" class="form-control" ng-model="mos.quantity" placeholder="1" min="0" ng-change="$ctrl.updateFees()"></td>
                <td><strong>{{(mos.quantity | fmtSupply:mos.mosaicId:$ctrl.mosaicsMetaData)[0]}}</strong>
                <span class="text-muted">.{{(mos.quantity | fmtSupply:mos.mosaicId:$ctrl.mosaicsMetaData)[1]}}</span>
                <td>
                  <tag-levy mos="mos" tx="$ctrl.formData" mosaics="$ctrl.mosaicsMetaData">
                    <div ng-show="levy.type">
                      <p class="form-control-static">
                        <!-- tx.amount * 1000000 because it needs to be in micro xem in fmtLevyFee filter -->
                        <strong>{{mos | fmtLevyFee:tx.amount*1000000:levy:mosaics}}</strong>
                        <span class="text-muted">{{levy.mosaicId.namespaceId}}</span>:{{levy.mosaicId.name}}
                        <span ng-show="levy.type === 1">- I<!--({{ 'TRANSFER_INFO_LEVY_TYPE_1' | translate }})--></span>
                        <span ng-show="levy.type === 2">- II<!--({{ 'TRANSFER_INFO_LEVY_TYPE_2' | translate }})--></span>
                      </p>
                    </div>
                    <div ng-show="!levy.type">
                            {{ 'GENERAL_NONE' | translate }}
                    </div>
                  </tag-levy>
                </td>
                <td>
                  <a ng-click="$ctrl.removeMosaic($index)">
                    <span class="fa fa-times"></span>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="panel-body" ng-show="!$ctrl.formData.mosaics.length">
            <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
          </div>
          <div class="bg-info">
            <small><i><b>{{ 'GENERAL_LEVY_TYPES' | translate }}: {{ 'GENERAL_LEVY_TYPES_NOTE' | translate }}</b></i></small>
          </div>
        </div>
</div>

<!-- Invoice part -->
<div class="col-md-6" ng-show="$ctrl.invoice">
  <div class="panel-heading">
    <h3>{{ 'GENERAL_QR' | translate }}</h3>
  </div>
  <div class="panel-body">
    <center>
      <!-- QR appended from controller here -->
      <div id="invoiceQR"></div>
    </center>
  </div>
</div>

    </div>
  </div>
</div>
